import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const home = {template: '<div>home内容</div>'}
const first = {template: '<div>first内容</div>'}
const second = {template: '<div>second内容</div>'}

const hehe = {template: '<div>hehe内容</div>'}

const firstFirst = {template: '<div>firstFirst内容{{ $route.params.id }}</div>'}
const firstSecond = {template: '<div>firstSecond内容</div>'}

const first1 = {
    template: `
        <div class="asdf">
            <h2>组件</h2>
            <router-view></router-view>
        </div>
    `
}

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {path: '/', name: 'home', component: home},
        {
            path: '/first', component: first1,
            children: [
                {path: '/', name: 'home-first', component: first},
                {path: 'first', name: 'home-first-first', component: firstFirst},
                {path: 'second', name: 'home-first-second', component: firstSecond},
                {path: 'third', redirect: 'first'},
            ]
        },
        {path: '/second', name: 'home-second', component: second, alias: ['/gogo','/papa']},
        {path: '/aaa/:id', component: firstFirst},
        {path: '/bbb/:id', redirect: '/aaa/:id'},
        {
            path: '/ccc/:id',
            redirect: xxxx => {
                const {hash, params, query}=xxxx;
                if (params.id == '001') {
                    return '/'
                }
            }
        }
    ]
});

new Vue({
    template: `
        <div id="r">
            <h1>导航</h1>
            <p>{{ $route.name }}</p>
            <ol>

                <li><router-link to="/first">first</router-link></li>
                    <ol>
                        <li><router-link :to="{name:'home-first-first',params:{id:123}}">first</router-link></li>
                        <li><router-link to="/first/second">second</router-link></li>   
                        <li><router-link to="third">third</router-link></li>
                    </ol>
                <li><router-link to="/second">second</router-link></li>
                <li><router-link to="/gogo">gogo</router-link></li>
                
                
                <li><router-link to="/aaa/123">aaa</router-link></li>
                <li><router-link to="/bbb/3423">bbb</router-link></li>
                <li><router-link to="/ccc/001">ccc</router-link></li>
            </ol>
            <router-view class="" ></router-view>
        </div>
    `,
    router
}).$mount('#app');